<template>
  <main class="preview-panel">
    <ActionButtons 
      :hasExamData="!!currentExamData"
      :isStreaming="isStreaming"
      @saveTemplate="$emit('saveTemplate')"
      @exportQuestions="$emit('exportQuestions')"
      @exportWithAnswers="$emit('exportWithAnswers')"
      @newExam="$emit('newExam')"
    />

    <!-- 试卷预览 -->
    <div class="exam-preview" v-if="currentExamData">
      <!-- 试卷标题 -->
      <div class="exam-header">
        <h2>{{ examTitle }}
          <span v-if="isStreaming" class="streaming-indicator">🔄 生成中...</span>
        </h2>
        <div class="exam-info">
          <span>年级：{{ currentExamData.grade }}</span>
          <span>科目：{{ currentExamData.subject }}</span>
          <span>难度：{{ currentExamData.difficulty }}</span>
          <span>总题数：{{ totalQuestions }}题</span>
        </div>
      </div>

      <!-- 试卷内容 -->
      <div class="exam-content">
        <QuestionSection 
          v-if="choiceQuestions.length > 0"
          :questions="choiceQuestions"
          type="选择题"
          :title="`一、选择题（每题${getScore('choice')}分，共${choiceQuestions.length * getScore('choice')}分）`"
        />
        
        <QuestionSection 
          v-if="fillQuestions.length > 0"
          :questions="fillQuestions"
          type="填空题"
          :title="`二、填空题（每题${getScore('fill')}分，共${fillQuestions.length * getScore('fill')}分）`"
        />
        
        <QuestionSection 
          v-if="answerQuestions.length > 0"
          :questions="answerQuestions"
          type="解答题"
          :title="`三、解答题（每题${getScore('answer')}分，共${answerQuestions.length * getScore('answer')}分）`"
        />
      </div>
    </div>

    <!-- 空状态 -->
    <EmptyState v-if="!currentExamData && !isGenerating" />
    
    <!-- 生成中状态 -->
    <LoadingState v-if="isGenerating && !isStreaming" />
  </main>
</template>

<script>
import ActionButtons from './ActionButtons.vue'
import QuestionSection from './preview/QuestionSection.vue'
import EmptyState from './preview/EmptyState.vue'
import LoadingState from './preview/LoadingState.vue'

export default {
  name: 'ExamPreview',
  components: {
    ActionButtons,
    QuestionSection,
    EmptyState,
    LoadingState
  },
  props: {
    currentExamData: {
      type: Object,
      default: null
    },
    examTitle: {
      type: String,
      default: ''
    },
    totalQuestions: {
      type: Number,
      default: 0
    },
    choiceQuestions: {
      type: Array,
      default: () => []
    },
    fillQuestions: {
      type: Array,
      default: () => []
    },
    answerQuestions: {
      type: Array,
      default: () => []
    },
    isGenerating: {
      type: Boolean,
      default: false
    },
    isStreaming: {
      type: Boolean,
      default: false
    },
    getScore: {
      type: Function,
      required: true
    }
  },
  emits: ['saveTemplate', 'exportQuestions', 'exportWithAnswers', 'newExam']
}
</script>

<style scoped>
.preview-panel {
  flex: 1;
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow-y: auto;
}

.exam-preview {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 2rem;
  background: #fafafa;
}

.exam-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.exam-header h2 {
  color: #2d3748;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.streaming-indicator {
  font-size: 1rem;
  color: #667eea;
  animation: pulse 2s ease-in-out infinite;
}

.exam-info {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  color: #718096;
  font-size: 0.9rem;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
</style>